<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1 {
            width: 100px;
            height: 100px;
            background-color: aqua;
        }
        .baidupan {
            transition: 2s;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <hr>
    <img src="./baidupan.png" class="baidupan">
    <script>

        // 2.双击实现盒子的缩放
        const box = document.querySelector(".box1")
        box.ondblclick = function () {
            if (box.style.height !== '200px') {
                box.style.height = '200px';
                box.style.width = '200px';
            } else {
                box.style.height = '100px';
                box.style.width = '100px';
            }
            i++;
        }


        // 3.图片的旋转 向左旋转90°，和向右旋转90°
        const pan = document.querySelector(".baidupan")
        let x = 0;
        let y = 0;
        pan.onclick = function () {
            x -= 90;
            pan.style.transform = `rotate(${x}deg)`;
        }
        pan.ondblclick = function () {
            pan.style.transform = `rotate(0deg)`;
        }
        pan.oncontextmenu = function () {
            y += 90;
            pan.style.transform = `rotate(${y}deg)`;
        }

        // 4."数值修改器" 函数名：modify，
        // 接受两个参数target(可定义number类型和obj类型两个变量)，operation(add则+10和reset则置0两种 )
        // 例：modify(num, "add"); 
        // 打印出变化后的值，看是否符合预期
        let obj;
        obj = {name : "张三" , age : "33"}
        function modify(target,operation) {
            if (typeof(target) == "number") {
                if (operation == "add") {
                    target += 10;
                }
                else if (operation == "reset") {
                    target = 0;
                }
            }
            else if (typeof(target) == "object") {
                if (operation == "add") {
                    target.age += 10;
                }
                else if (operation == "reset") {
                    target.age = 0;
                }
            } else {
                return console.log("出错了")
            }
            return console.log(target);
        }
        modify(11, "add")
        modify(11, "reset")
        modify(obj, "add")
        modify(obj, "reset")
        console.log(obj)
    </script>
</body>
</html>